import React, { Fragment, useState } from 'react';
import { Card, Content, Guide, Button } from 'react-fule-ui';

export default function FullCard() {
  // 新手指引
  const [current, setCurrent] = useState(-1);
  const funCurrent = () => {
    setCurrent(0);
  };
  return (
    <Fragment>
      <Content>
        <Content.Header>新手指引</Content.Header>
        <Content.Body>
          <Card>
            <Card.Header>基本用法</Card.Header>
            <Card.Body>
              <Button id="guideStep2" onClick={funCurrent}>
                点击
              </Button>
            </Card.Body>
          </Card>
          {/* 新手指引 */}
          <Guide
            current={current}
            onCurrentChange={setCurrent}
            steps={[
              {
                element: () => document.querySelector('#guideStep1'),
                desc: '点击显示深色的主题色',
                placement: 'top-end',
                placementLeft: 30,
                radius: 50,
                prevBtn: '跳过',
                nextBtn: `下一步 ${current + 1}/2`,
              },
              {
                element: () => document.querySelector('#guideStep2'),
                desc: '你在干什么',
                placement: 'bottom',
                radius: 30,
                prevBtn: '上一步',
                nextBtn: `立即体验 ${current + 1}/2`,
              },
            ]}
          />
        </Content.Body>
      </Content>
    </Fragment>
  );
}
